<template>
  <el-button type="primary" style="float: left" @click="router.push({path:'/classManagement/exam'})">结束批改</el-button>
  <el-empty description="这个套试卷没有主观题，不用批改" style="margin-top: 50px" v-if="answerList.length<=0"/>
    <div class="correct-left" v-if="answerList.length>0">
      <h1 style="font-size: 30px;text-align: center">答案</h1>
      <h2 style="font-size: 20px;margin-left: 20px">题目:</h2>
      <div style="font-size: 15px;margin-left: 30px;margin-top:10px;word-wrap: break-word;word-break: break-all;height: 150px">
        {{answerList[index].questionTitle}}
      </div>
      <h2 style="font-size: 20px;margin-left: 20px">解析:</h2>
      <div style="font-size: 15px;margin-left: 30px;margin-top:10px;word-wrap: break-word;word-break: break-all;height: 150px">
        {{answerList[index].answerContent}}
      </div>
      <h2 style="font-size: 20px;margin-left: 20px">分数:</h2>
      <div style="font-size: 15px;margin-left: 30px;margin-top:10px;height: 150px">
        {{answerList[index].score}}
      </div>
    </div>
     <div class="correct-right" v-if="studentList.length<=0&&answerList.length>0">
     <el-empty description="还没有学生提交试卷或者已经批改完了，请确认一下情况" />
     </div>
    <div class="correct-right" v-if="studentList.length>0">
      <h1 style="font-size: 30px;text-align: center">学生答案</h1>
      <h2 style="font-size: 20px;margin-left: 20px">题目:</h2>
      <div style="font-size: 15px;margin-left: 30px;margin-top:10px;word-wrap: break-word;word-break: break-all;height: 150px">
        {{answerList[index].questionTitle}}
      </div>
      <h2 style="font-size: 20px;margin-left: 20px">学生作答:</h2>
      <div style="font-size: 15px;margin-left: 30px;margin-top:10px;word-wrap: break-word;word-break: break-all;height: 150px">
        {{studentList[indexStudent].studentAnswer}}
      </div>
      <h2 style="font-size: 20px;margin-left: 20px">分数:</h2>
      <div style="font-size: 15px;margin-left: 50px;margin-top:10px;height: 100px">
      <el-input-number v-model="studentList[indexStudent].score" class="mx-4" min="0" :max="answerList[index].score"/>
      </div>
      <el-button type="primary" style="float: right;margin-right: 30px;width: 160px;" @click="switchingTopics">提交</el-button>
    </div>
</template>

<script setup>
import router from "@/router/index.js";
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import axiosInstance from "@/axios/index.js";
import {ElMessage} from "element-plus";
let route = useRoute();
//考试记录id
const questionId = route.query.id;
//答案题目控制器
const index=ref(0)
//学生答案控制器
const indexStudent=ref(0)
//答案列表
const answerList =ref({});
//学生答案
const studentList =ref([]);
//获取答案
const getAnswerListAPI = () => {
  axiosInstance.get('/examRecords/selectById',{params:{
    id:questionId,
    status:3
  }}).then(res=> {
    answerList.value= res.data.data.list
    getStudentListAPI()
  })
}
//获取学生答案
const getStudentListAPI = () => {
    axiosInstance.get('/examGrades/studentIdGrades',{params:{
        examRecordId:questionId,
        classId:localStorage.getItem("classId")
      }}).then(res=> {
        res.data.data.forEach(item => {
          if(item!==null){
            studentList.value.push(item)
          }
        })
      })
}
onMounted( () => {
  getAnswerListAPI()
})
//切换题目
const switchingTopics = () => {
  indexStudent.value++
  if(indexStudent.value>studentList.value.length-1){
    axiosInstance.post('/examGrades/gradeCorrection',JSON.stringify(studentList.value),{headers: {'Content-Type': 'application/json'}}).then(res=> {
      if (res.data.code === 200) {
        ElMessage({
          message: '批改成功',
          type: 'success',
        })
        router.push({path:'/classManagement/exam'})
      }
    })
  }else {
    if(studentList.value[indexStudent.value-1].questionId!==studentList.value[indexStudent.value].questionId){
      index.value++
    }
  }
}
</script>

<style scoped>
.correct-left{
  margin-top: 50px;
  width: 45%;
  height: 600px;
  float: left;
  border: black solid 1px;
}
.correct-right{
  margin-top: 50px;
  width: 45%;
  height: 600px;
  float: right;
  border: black solid 1px;
}
</style>